import React, {useEffect, useState} from 'react'
import { Row, Col } from 'antd'
import { Chart } from '@antv/g2';
export default function DashBoard() {

  let chart = null;
  const initChart = () => {
    const data = [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 }
    ];
    chart = new Chart({
      container: 'charts',
      autoFit: true,
      theme: 'classic'
    });
    // 绘制图表
    chart.interval().data(data).encode('x', 'genre').encode('y', 'sold'); 
    // 渲染可视化
    chart.render();
  }
  useEffect(() => {
    initChart();
  }, [])
  return (
    <div>
      <Row>
        <Col xs={24} sm={12} md={6}>
          <div style={{height: 200,background: '#27E2EE' }}></div>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <div style={{height: 200,background: '#38ECDB' }}></div>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <div style={{height: 200,background: '#65F4C0' }}></div>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <div style={{height: 200,background: '#96F9A2' }}></div>
        </Col>
      </Row>
      <div id="charts" style={{maxWidth: 800, height: 600}}></div>
    </div>
  )
}

